<template>
  <view class="page">
    <view class="page-search nianTop" >

      <up-tabs   :list="tagList" lineColor="#1677FF" :activeStyle="{
					color: '#1677FF',
					fontWeight: 'bolder'
				}" :scrollable="true" @click="tabChange"></up-tabs>

      <view  class="search" v-if="selectTable.name=='下属车辆'||selectTable.name=='车辆管理'">

        <view v-if="selectTable.name=='车辆管理'" class="dropdown-btn" @click="toggleDropdown(i)" v-for="i in searchTypeList" >
          <view class="selTop" :style="{color:i.selectData.value!=''? '#4773ee':'#000'}">
            {{ i.selectData.label ?i.selectData.label : i.name}}
          </view>

          <up-icon class="ico" name="arrow-down" :color="i.selectData.value!=''? '#4773ee':'#000'" :size="12" v-if="selectClick!=i"></up-icon>
          <up-icon class="ico" v-else name="arrow-up" :color="i.selectData.value!=''? '#4773ee':'#000'" :size="12"></up-icon>
          <!--        <image  class="dropdown-arrow"></image>-->
        </view>

        <view v-if="selectTable.name=='车辆管理'&&searchTypeList[0].selectData.label=='车牌号'"  @click.stop="clickSeaech" class="gai"> </view>

        <up-search :disabled="searchTypeList[0].selectData.label=='车牌号'"  :inputStyle="{fontSize: '22rpx',}" :placeholder="searchTypeList[0].selectData.label=='车牌号'?'请输入车牌号':searchTypeList[0].selectData.label=='车主'?'请输入车主名称':'请输入车牌号或车主名称'" shape="square" height="45rpx" :showAction="false" v-model="keyword" ></up-search>

        <up-button text="搜索" type="primary" plain :customStyle="{
						width: '106rpx',
						height: selectTable.name=='车辆管理'? '62rpx':'42rpx',
						fontSize: '22rpx',
						border:'0rpx',
						marginLeft: '24rpx',
					}" @click="init" ></up-button>

      </view>

      <car-num
          :show.sync="carNumShow"
          :vehicleNo="keyword"
          @confirm="keyboardconfirm"
          @close="carNumShow=false"
          vehicleType="car"
      ></car-num>

      <view class="search" v-if="selectTable.name=='车位管理'&&cheweiSel=='配额管理'">
        <up-search :inputStyle="{fontSize: '22rpx',}" placeholder="单位搜索" shape="square" height="45rpx" :showAction="false" v-model="depNameSearch" ></up-search>
        <up-button text="搜索" type="primary" plain :customStyle="{
						width: '106rpx',
						height: '42rpx',
						fontSize: '22rpx',
						border:'0rpx',
						marginLeft: '24rpx',
					}" @click="init" ></up-button>
      </view>

      <view class="search" v-if="selectTable.name=='审批历史'">
        <up-search :inputStyle="{fontSize: '22rpx',}" placeholder="申请人搜索" shape="square" height="45rpx" :showAction="false" v-model="splsSearch" ></up-search>
        <up-button text="搜索" type="primary" plain :customStyle="{
						width: '106rpx',
						height: '42rpx',
						fontSize: '22rpx',
						border:'0rpx',
						marginLeft: '24rpx',
					}" @click="init" ></up-button>
      </view>
<!--  下拉框-->
<!--<view class="selsy" v-if="selectTable.name=='车辆管理'">-->
<!--  <view class="dropdown-btn" @click="toggleDropdown(i)" v-for="i in selectList" >-->
<!--    <view class="selTop" :style="{color:i.selectData.value!=''? '#4773ee':'#000'}">-->
<!--      {{ i.selectData.label ?i.selectData.label : i.name}}-->
<!--    </view>-->

<!--    <up-icon class="ico" name="arrow-down" :color="i.selectData.value!=''? '#4773ee':'#000'" :size="12" v-if="selectClick!=i"></up-icon>-->
<!--    <up-icon class="ico" v-else name="arrow-up" :color="i.selectData.value!=''? '#4773ee':'#000'" :size="12"></up-icon>-->
<!--    &lt;!&ndash;        <image  class="dropdown-arrow"></image>&ndash;&gt;-->
<!--  </view>-->
<!--</view>-->

      <view class="sel-box" v-if="selectTable.name=='车位管理'">
        <view v-for="i in cheweiOpt" :key="i.value" class="ma-le">
        <view :class="cheweiSel==i.name?'sel':'no'" @click="selClickChewei(i)">
          {{i.name}}
        </view>
        </view>
        <up-button class="tuisong" text="系统管理" type="primary"  :customStyle="{
						width: '146rpx',
						height: '62rpx',
						fontSize: '21rpx',


					}" @click="goMessage" ></up-button>
      </view>


      <!-- 下拉列表 -->
      <transition name="slide-fade">
      <view v-if="isDropdownOpen&&selectTable.name=='车辆管理'" class="dropdown-list" :style="{top:selectClick.key=='gjc'?'98%':'150%'}">
        <view :class="['dropdown-item' ,item.value==selectClick?.selectData?.value?'sel':''] " v-for="(item, index) in selectClick.selOptions" :key="index" @click="selectItem(item,searchTypeList)">
          <view class="selOpt">
            {{item.label}}
          </view>

          <up-icon class="ico" name="checkmark" color=" #4773ee" :size="16" v-if="item.value==selectClick?.selectData?.value"></up-icon>

        </view>
      </view>
      </transition>


    </view>

    <!-- 列表数据 -->
    <view class="page-items" :style="{'padding-bottom':selectTable.name!='我的车辆'&&selectTable.name!='代申请的'?'1rpx':'60rpx'}">
<!--      tongjiData-->
      <view class="tongMain" v-if="selectTable.name=='下属车辆'">

        <view class="tongjiBoxitem" v-for="(v, i) in tongjiData" :key="i">

<!--          <view   >-->
            <view class="name">
              {{v.name}}
            </view>
            <view class="value">
              <view class='data'>
                {{v.num}}
              </view>
              <view  class='title'>
                {{v.danwei}}
              </view>
            </view>
        </view>
      </view>

      <view class="tongMain" v-if="selectTable.name=='车辆管理'&& store.getters.userInfo.depId=='106'">
        <view class="tongjiBoxitem" v-for="(v, i) in mainCarData" :key="i">

          <!--          <view   >-->
          <view class="name">
            {{v.name}}
          </view>
          <view class="value">
            <view class='data'>
              {{v.num}}
            </view>
            <view  class='title'>
              {{v.danwei}}
            </view>
          </view>
        </view>
      </view>


      <view class="page-item" v-for="(v, i) in items" :key="i">

        <view  v-if="selectTable.name=='我的车辆'||selectTable.name=='代申请的'" class="info">
          <view class="flex-w" >
            <view class="le" >
              <view class="carid">
                <view class="idSty">
                  {{v.licensePlate}}
                </view>

                <view class="inde-icon" @click="deleteCar(v)">
                  <up-icon name="trash" color="#4773ee" :size="11"></up-icon>
                  <view class="posSty" style="font-size: 17rpx;line-height: 30rpx"> 删除</view>
                </view>

              </view>
              <view v-if=" selectTable.name=='我的车辆'"  class="careName">
                <span v-if="v.carModel">{{v.carBrand}} {{v.carModel}} {{v.carColor}} </span>
                <span v-else> {{ v.carType==1?'小型车辆':'普通车辆'}}</span>
              </view>
              <view v-if="selectTable.name=='代申请的'"  class="careName">
                <span v-if="v.vehicleModel">{{v.vehicleBrand}} {{v.vehicleModel}} {{v.vehicleColor}} </span>
                <span v-else> {{ v.carType==1?'小型车辆':'普通车辆'}}</span>
              </view>

            </view>
            <view class="ri" :style="{'border-radius': selectTable.name=='代申请的'? '0 16rpx 0 0':'0 16rpx 16rpx 0'} " >
              <image class="img-sty" src="@/static/car.jpg" ></image>
            </view>
          </view>

          <view v-if="selectTable.name=='代申请的'" class="daiInfo">
            <view class="infoItem">
              <view class="info-data">
                车主：
              </view>
              <view class="info-title">
                {{v.ownerName}}
              </view>
            </view>

            <view class="infoItem">
              <view class="info-data">
                区域：
              </view>
              <view class="info-title">
                {{v.parkingArea}}
              </view>
            </view>

            <view class="infoItem">
              <view class="info-data">
                有效期至：
              </view>
              <view class="info-title">
                {{v.passThroughAgeing}}
              </view>
            </view>
          </view>
        </view>


        <view @click="toInfo(v,0)"  v-if="selectTable.name=='申请历史'" >
          <view :class="['status-sqls', v.status == 2 ? 'success' :(v.status == 3||v.status == 4)?'error' :'']">{{v.status == 2 ? '已通过' :(v.status == 3||v.status == 4) ? '未通过':'审批中'}}</view>
          <view class="title u-line-1">{{v.licensePlate}}</view>
          <view class="title-sub u-line-1">{{v.vehicleBrand}}{{v.vehicleModel}} {{ v.vehicleColor}} </view>
          <view class="infoNorman">
            <view class="flex">
              <view class="ps">
                <view class="psitem">
                  <label>提交时间</label>
                  <text class="u-line-1">{{v.applicationTime}}</text>
                </view>

                <view class="psitem">
                  <label>申请类型</label>
                  <text class="u-line-1">{{v.vehiclePersonnelType}} 类型车辆申请</text>
                </view>

              </view>
            </view>
            <view class="desc" v-if="v.result">
              <text class="u-line-4">{{v.remark}}</text>
            </view>
          </view>
<!--          <view class="btns">-->
<!--            <view class="btn" @click="clickDelete(v)">删除</view>-->
<!--            <view class="btn" @click="clickEdit(v)">编辑</view>-->
<!--            <view class="btn primary" @click="clickDetail(v)">详情</view>-->
<!--          </view>-->
        </view>

        <view @click="toInfo(v,1)"  v-if="selectTable.name=='审批历史'" >

          <view v-if="(store.getters.userInfo.depId=='106'&&v.status == 1)||(store.getters.userInfo.depId!='106'&&v.status == 0)" :class="['shen-sqls']"> 去审批 > </view>

          <view :class="['status-sqls', v.status == 2 ? 'success' :(v.status == 3||v.status == 4)?'error' :'']">{{v.status == 2 ? '已通过' :(v.status == 3||v.status == 4) ? '未通过':'审批中'}}</view>
<!--          <view :class="['status', v.status == 2 ? 'success' : '']">{{v.status == 1 ? '审批中' : '已通过'}}</view>-->
          <view class="title u-line-1">{{v.licensePlate}}</view>
          <view class="title-sub u-line-1">{{v.vehicleBrand}}{{v.vehicleModel}} {{ v.vehicleColor}} </view>
          <view class="infoNorman">
            <view class="flex">
              <view class="ps">
                <view class="psitem">
                  <label>提交时间</label>
                  <text class="u-line-1">{{v.applicationTime}}</text>
                </view>
                <view class="psitem">
                  <label>提交职工</label>
                  <text class="u-line-1">{{v.applicantName}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view   v-if="selectTable.name=='下属车辆'" @click="toCarInfo(v,0)">
          <view :class="['status-clgl', v.vehiclePersonnelType == 'A1' ? 'success' :v.vehiclePersonnelType == 'A2'? 'primary':'']">{{(v.vehiclePersonnelType||'B')+'类'}}</view>
          <view class="title u-line-1">{{v.carNum}} </view>
          <view v-if="!v.carModel" class="title-sub u-line-1">{{ '小型车辆' }}</view>

          <view v-if="v.carModel" class="title-sub u-line-1">{{v.carBrand}}{{v.carModel}} {{ v.carColor}}</view>
          <view class="infoNorman">
            <view class="daiInfo-common">
              <view class="infoItem">
                <view class="info-data">
                  车主：
                </view>
                <view class="info-title">
                  {{v.ownerName||'未知'}}
                </view>
              </view>

              <view class="infoItem">
                <view class="info-data">
                  区域：
                </view>
                <view class="info-title">
                  {{v.memo||v.parkingArea||'——'}}
                </view>
              </view>



              <view class="infoItem">
                <view class="info-data">
                  有效期至：
                </view>
                <view class="info-title">
                  {{v.passThroughAgeing||'长期'}}
                </view>
              </view>


            </view>
          </view>
        </view>
<!--        @click = "toRecord(v.carNum)"-->
        <view  @click = "toRecord(v)" v-if="selectTable.name=='车辆管理'" >
<!--          {{v.vehiclePersonnelType}}-->
          <view :class="['status-clgl', v.vehiclePersonnelType == 'A1' ? 'success' :v.vehiclePersonnelType == 'A2'? 'primary':'']">{{(v.vehiclePersonnelType||'B')+'类'}}</view>
          <view class="title u-line-1">{{v.carNum}} <span class="subtit"> {{v.departmentName}}</span></view>
          <view v-if="!v.carModel" class="title-sub u-line-1">{{ '小型车辆' }}</view>

          <view v-if="v.carModel" class="title-sub u-line-1">{{v.carBrand}}{{v.carModel}} {{ v.carColor}}</view>
          <view class="infoNorman">
            <view class="daiInfo-common">
              <view class="infoItem">
                <view class="info-data">
                  车主：
                </view>
                <view class="info-title">
                  {{v.ownerName||'未知'}}
                </view>
              </view>

              <view class="infoItem">
                <view class="info-data">
                  区域：
                </view>
                <view class="info-title">
                  {{v.memo||v.parkingArea||'——'}}
                </view>
              </view>



              <view class="infoItem">
                <view class="info-data">
                  有效期至：
                </view>
                <view class="info-title">
                  {{v.passThroughAgeing||'长期'}}
                </view>
              </view>


            </view>
          </view>
        </view>

        <view  v-if="selectTable.name=='车位管理'&&cheweiSel=='配额管理'" >
          <view class="chewei" @click="toWei(v)"> 去管理> </view>
          <view class="title u-line-1">{{v.departmentName}}</view>
          <view class="infoNorman">
            <view class="daiInfo-commonche" >
              <view class="infoItem-che" style="margin-top: 0">
                <view class="info-data">
                  分配数量：
                </view>
                <view class="info-title">
                  {{v.quota}}
                </view>
              </view>

              <view class="infoItem-che" style="margin-top: 0">
                <view class="info-data">
                  已使用数：
                </view>
                <view class="info-title">
                  {{v.numberUsed}}
                </view>
              </view>

            </view>

            <view class="daiInfo-commonche">
              <view class="infoItem-che">
                <view class="info-data">
                  剩余数量：
                </view>
                <view class="info-title">
                  {{v.quota-v.numberUsed}}
                </view>
              </view>

              <view class="infoItem-che">
                <view class="info-data">
                  即将释放：
                </view>
                <view class="info-title">
                  {{0}}
                </view>
              </view>
            </view>




          </view>
        </view>

      </view>

      <view v-if="selectTable.name=='车位管理'&&cheweiSel=='车辆余位'">

               <view class="clyw">
          <view class="clyw-main">



                        <view  class="top1" >
                          <view class="top1-item" style="width: 17%" v-for="v in zaixiao">
                            <view class="name">
                              {{v.label}}
                            </view>
                            <view class="value">
                              <view class='data'>
                                {{v.value}}
                              </view>
                              <view  class='title'>
                                {{v.dan}}
                              </view>
                            </view>
                          </view>
                        </view>



            <view class="top1" style="padding-top: 28rpx">
              <view class="top1-item" v-for="v in clyw">
                <view class="name">
                  {{v.label}}
                </view>
                <view class="value">
                  <view class='data'>
                    {{v.value}}
                  </view>
                  <view  class='title'>
                    {{v.dan}}
                  </view>
                </view>
              </view>
            </view>


            <view class="top2">
              <view class="top1-item" v-for="v in shiyl">
                <view class="name">
                  {{v.label}}
                </view>
                <view class="value">
                  <view class='data'>
                    {{((1000 - (v.value*10))/10).toFixed(1)}}%
                  </view>
                </view>
                <view class="chars">
                  <view class="use" :style="{width: ((1000 - (v.value*10))/10).toFixed(1)+'%'}"></view>
                  <view class="empt"></view>
                </view>

              </view>
            </view>


<!--            <view  class="top1" style="padding-top: 28rpx">-->
<!--              <view class="top1-item" style="width: 17%" v-for="v in zaixiao">-->
<!--                <view class="name">-->
<!--                  {{v.label}}-->
<!--                </view>-->
<!--                <view class="value">-->
<!--                  <view class='data'>-->
<!--                    {{v.value}}-->
<!--                  </view>-->
<!--                  <view  class='title'>-->
<!--                    {{v.dan}}-->
<!--                  </view>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

            <view class="charts">
              <view class="title">
                今日车辆进出趋势图
              </view>

              <view class="chart-sty">
                <qiun-data-charts
                    type="line"
                    :opts="opts"
                    :ontouch="true"
                    :chartData="chartData1"
                />
              </view>
            </view>

<!--            <view class="charts">-->
<!--              <view class="title">-->
<!--                月度车辆进出趋势图-->
<!--              </view>-->

<!--              <view class="chart-sty">-->
<!--                <qiun-data-charts-->
<!--                    type="line"-->
<!--                    :opts="opts"-->
<!--                    :ontouch="true"-->
<!--                    :chartData="chartData2"-->
<!--                />-->
<!--              </view>-->
<!--            </view>-->
          </view>
        </view>
      </view>

    </view>

    <view class="tip-text" v-if="items.length != 0 &&selectTable.name=='我的车辆' "> 每名教职工最多可申请两辆车  </view>
    <up-empty marginTop="120" v-if="items.length <= 0 &&selectTable.name!='车位管理' " mode="data" text="暂无车辆数据" :width="80" :height="80" icon="https://imgs.ddeke.com/2024/08/01/rT5sB51gU8.png"></up-empty>
  </view>

  <view class="post-btn" v-if="selectTable.name=='我的车辆'||selectTable.name=='代申请的'">
    <up-button text="十 发 起 申 请" color="#1677FF" :customStyle="{
			width: '100%',
			borderRadius: '16rpx'
		}" @click="submit"></up-button>
  </view>

  <up-modal @confirm="modeTip.show=false" :show="modeTip.show"  :content='modeTip.content'></up-modal>

</template>

<script setup>

import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { showConfirm } from '@/utils/common.js';
import QiunDataCharts from "../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import {
  commonRequest,
  daiRequest, deleteDaiAdd, getCarUserInfo,
  getTabList,
  getUserInfo,
  myAddDaiAdd, myCarCheck,
  myCarList,
  myCarRequest, quanbuRequest,
  quotaList, qushiRequest, recordRequest, TongRequest, userCasLogin, userLogin, xiashuRequest
} from "../api/home";
import store from "../store";
import {depTestData, userTestData} from "../api/test";
import {getToken, removeToken, setToken} from "../utils/auth";
import {userTestCar} from "../api/testCar";
import {toast} from "uview-plus";
import CryptoJS from "crypto-js";
import CarNum from '@/components/CarNum.vue';

let pageSize = 10;
let pageNum = 1;
let total = 0;
const loading = ref(false);
const tabId = ref(0) ;
const items = ref([]);
const keyword = ref("");
const depNameSearch = ref("");
const splsSearch = ref("");
const carNumShow = ref(false);
const keyboardconfirm = (e)=>{
  keyword.value= e
  carNumShow.value = false
}
const clickSeaech = ()=>{
  console.log('8888')
  searchTypeList.value[0].selectData.label=='车牌号'?carNumShow.value = true:carNumShow.value = false
}
// const params = ref({
//   cllx:{},
//   tcqy: {},
//   ssdw: {}
// })

const carTong = ref({xscl:{},clgl:{}})

const searchTypeList = ref([
  {
    name:'关键词',
    key:'gjc',
    selectData:{
      label:'车主',
      value:'2'
    },
    selOptions:[
      {
        label:'车主',
        value:'2'
      },
      {
        label:'车牌号',
        value:'1'
      },

      {
        label:'综合',
        value:'3'
      },
    ]
  },
])

const selectList = ref([
  {
    name:'车辆类型',
    key:'cllx',
    selectData:{
      label:'',
      value:''
    },
    selOptions:[
      {
        label:'全部类型',
        value:''
      },
      {
        label:'A类',
        value:'A'
      },
      {
        label:'B类',
        value:'B'
      },
    ]
  },
  {
    name:'停车区域',
    key:'tcqy',
    selectData:{
      label:'',
      value:''
    },
    selOptions:[
      {
        label:'全部区域',
        value:''
      },
      {
        label:'南校区',
        value:'1'
      },
      {
        label:'北校区',
        value:'2'
      },
    ]
  },
  {
    name:'所属单位',
    key:'ssdw',
    selectData:{
      label:'',
      value:''
    },
    selOptions:[
      {
        label:'全部单位',
        value:''
      },
      {
        label:'后勤部',
        value:'hqb'
      },
      {
        label:'教师',
        value:'jshi'
      },

    ]
  },
])

const tagList = ref([
  { name: '我的车辆', status: 0 },
  // { name: '代申请的', status: 1 },
  { name: '申请历史', status: 2 },
  // { name: '审批历史', status: 3 },
  // { name: '下属车辆', status: 4 },
  // { name: '车辆管理', status: 5 },
  // { name: '车位管理', status: 6 }
])
const isDropdownOpen = ref(false);
const selected = ref('');
const options = ['选项1', '选项2', '选项3']; // 你的选项列表
const selectClick = ref({})
const toggleDropdown = (e) => {
  selectClick.value = e

  isDropdownOpen.value = !isDropdownOpen.value;
  if(isDropdownOpen.value==false){
    selectClick.value = {}
  }
};

const selType = ref({
  type:''
})

const selectItem = (i,data) => {
  // selected.value = item;
console.log(data)

  data.forEach(item=>{
    if(item.key==selectClick.value.key){
      item.selectData =i
    }
  })

  const params = {
    cllx:selectList.value[0].selectData.value,
    tcqy:selectList.value[1].selectData.value,
    ssdw:selectList.value[2].selectData.value,
  }
  // console.log(params)
  console.log(searchTypeList.value)

  selectClick.value = {}

  isDropdownOpen.value = false; // 选中后关闭下拉列表
  if(searchTypeList.value[0].key=='gjc'){
    keyword.value = ''
  }
};


onShow(async ()=>{
  // setToken('eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIyMzEwNjM0IiwibmFtZSI6IuadjualtyIsImlhdCI6MTc0NjUwMDcxOCwiZXhwIjoxNzQ2NTA0MzE4fQ.V7htvFBXf9Euw-cUoI8Ttz18oiDqGGtuqOMLPerFEmk')

  pageNum = 1;
  await getTokenData()
  if(store.getters.userInfo){
    getInspectList(1)
  }

  uni.setNavigationBarColor ({
    frontColor: '#000000', // 前景颜色（标题文字的颜色），必须是'#ffffff'或'#000000'
    backgroundColor: '#fff', // 背景颜色，可以使用十六进制颜色值
    animation: { // 动画效果，可选
      duration: 400, // 动画变化时间，默认0，单位为ms
      timingFunc: 'easeIn' // 动画变化方式，默认 linear。有效值：linear easeIn easeOut easeInOut
    },
  });


    console.log('::::::::::::', getToken())
    if( getToken()){
      setTimeout (()=>{
      formatterTab()
      },1000)
    }
})

onReachBottom(() => {
  pageNum = pageNum+1
  getInspectList(2)
  // if (items.value.length >= total) return;
  // getInspectList()
})

const selectTable = ref({name: '我的车辆', status: 0})
const tabChange = (e)=>{
  keyword.value = ''
  notNull = false
  items.value.length = 0
  selectTable.value = e
  pageNum = 1;
  tabId.value = e.status
  getInspectList(1)
}

let notNull = false

const init = ()=>{
  pageNum = 1;
  notNull = true
  getInspectList(1)

}

const tongjiData =ref([
  {
    name:'配额总数',
    num:'0',
    danwei:'辆'
  },
  {
    name:'车辆总数',
    num:'0',
    danwei:'个'
  },
  {
    name:'即将到期车辆数',
    num:'0',
    danwei:'辆'
  },
])

const mainCarData =ref([
  {
    name:'录入总车辆数',
    num:'0',
    danwei:'个'
  },
  {
    name:'在校车辆数',
    num:'0',
    danwei:'辆'
  },
  {
    name:'地库余位数',
    num:'0',
    danwei:'个'
  },
])


const userInfoData =ref()

const formatterTab = ()=>{
  getTabList(store.getters.userInfo.userId,store.getters.userInfo.depId).then(res=>{
      let userdata = store.getters.userInfo
    if(userdata.depId=='106' ){
      tagList.value =  [ { name: '我的车辆', status: 0 },
          { name: '代申请的', status: 1 },
          { name: '申请历史', status: 2 },
          { name: '审批历史', status: 3 },
          { name: '下属车辆', status: 4 },
          { name: '车辆管理', status: 5 },
          { name: '车位管理', status: 6 }]
    }    else if(res.data.menu==99){
      tagList.value = [ { name: '我的车辆', status: 0 },
        { name: '代申请的', status: 1 },
        { name: '申请历史', status: 2 },
        { name: '审批历史', status: 3 },
        { name: '下属车辆', status: 4 },
        { name: '车辆管理', status: 5 }]
        // { name: '车位管理', status: 6 }]
    }

    else if(res.data.user==1){
      tagList.value =  [ { name: '我的车辆', status: 0 },
        { name: '申请历史', status: 2 },
        { name: '审批历史', status: 3 },
        { name: '下属车辆', status: 4 },
      ]
    }

    else if(res.data.user==2){
      tagList.value =  [ { name: '我的车辆', status: 0 },
        { name: '代申请的', status: 1 },
        { name: '申请历史', status: 2 },
        { name: '下属车辆', status: 4 },
      ]
    }

    else if(res.data.user==3){
      tagList.value =  [ { name: '我的车辆', status: 0 },
        { name: '代申请的', status: 1 },
        { name: '申请历史', status: 2 },
        { name: '审批历史', status: 3 },
        { name: '下属车辆', status: 4 },
      ]
    }


  })
}
window.flgStatus = 1

let ceshiData = ref({token:'',ticket:'',userinfo:{}})
const getTokenData = ()=>{
  console.log('8888',window.flgStatus)
  const Data = store.getters.userInfo
  ceshiData.value.userinfo = Data

  if(window.location.search){
    ceshiData.value.ticket =    window.location.search.split('ticket')[1].split('=')[1]
  }
  ceshiData.value.token = getToken()
// console.log('1112231111')
// console.log(Data)
if(Data&&Data.userId){

} else {

  if(window.location.search.split('ticket').length>1){
    console.log('111111111')

    if(! getToken()){
      userCasLogin({ticket:window.location.search.split('ticket')[1].split('=')[1]}).then(res1=>{
        console.log('22222222',res1)
        if(res1.code==200){
          forData(res1.data)
        }else{
          window.location.href = ' https://cas.ndky.edu.cn/authserver/login?service=https://vehicle.ndky.edu.cn/'

        }
      })
    }


  }else{
    // const par = {
    //   userId: 2211033,
    //   userName: '陈永和',
    //   depId:106,
    //   depName:'保卫部',
    // }
    // userLogin(par).then(res=>{
    //   setToken(res.data)
    //   getInspectList(1)
    //   formatterTab()
    // })
    // store.dispatch('SetUsreInfo', par)

    // const asd = 'http://10.88.110.107:8003/common/getImage/4d49b741410266456d7ff7f417ba4271.jpg,http://10.88.110.107:8003/common/getImage/6089f5d92b6b62e85bd1042d2a8e0e64.jpg'
    //
    // console.log('/77777')
    // console.log(asd.split(',')[0])
    // console.log('https://vehicle.ndky.edu.cn/'+ asd.split(',')[0].split('http://10.88.110.107:8003/')[1])


    window.location.href = ' https://cas.ndky.edu.cn/authserver/login?service=https://vehicle.ndky.edu.cn/  '
  }
}


const forData = (id)=>{
  if(getToken().length<1){

    const params = {
      $filter:`RYBH eq '${id}'`,$top:50
    }

    userTestData(params).then(res=>{
      console.log('33333')
      const params1 = {
        $filter:`DWDM eq '${res.value[0].SWBMBH}'`,$top:50
      }
      depTestData(params1).then(red=>{
        const par = {
          userId: res.value[0].RYBH,
          userName: res.value[0].XM,
          depId:res.value[0].SWBMBH,
          depName:red.value[0].DWMC,
        }
        userLogin(par).then(res=>{
          setToken(res.data)
          getInspectList(1)
          setTimeout(()=>{
            formatterTab()

          },1000)
        })

        store.dispatch('SetUsreInfo', par)
        userInfoData.value = store.getters.userInfo
        console.log('this.isooooo',par)
      })
    })
  }
}
}

onLoad(async e=>{

  // const params = {
  //   $filter:`SWBMBH eq '${106}'`,$top:50
  // }

  // userTestData(params).then(res=>{
  //   console.log('363666636')
  // })
  // const da = CryptoJS.MD5('87aee7894daf6a07850b34de01d0d0ce'+'2310634').toString()
  // console.log('jkashfkjd',da)
  // await getTokenData()

})

const toRecord = (e)=>{
  uni.navigateTo({ url: `/subPackages/approval/record?id=${JSON.stringify(e)}` })

}


const insertList = (e,i)=>{
  if(i==1){
    items.value = []
    items.value.push(...e)
    // console.log('7777777')
    // console.log(items.value)
    // items.value.splice(0,items.value.length,...e)
  } else if(i==2){
    if(e.length>0||notNull){
      items.value.push(...e)
    }
  }
}
const toWei = (e)=>{
  uni.navigateTo({ url: `/subPackages/approval/list?id=${JSON.stringify(e)}` })
}
// 获取列表
const getInspectList = (t) => {   //1 切换tab  2 加载下一页
  let options = {
    pageSize,
    pageNum
  };

  let userInfo = store.getters.userInfo

  // console.log('++++++')
  // console.log(userInfo)

  setTimeout(()=>{

  if(selectTable.value.name=='我的车辆'){
    myCarList(Object.assign(options,{applicantId:userInfo.number,applicationType:0,status:2})).then(res=>{

      if(res?.data?.length>0||notNull){
        const carList = res.data.map(item=>{
          return {
            licensePlate:item.carNum,
            carType:item.carType,
            vehicleBrand:item.carBrand,
            carModel:item.carModel,
            carColor:item.carColor,
          }
        })
        insertList(carList,t)
      }
      console.log('PPPPPPPSS')
      console.log(res.data)
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

    })
  }
  else if (selectTable.value.name=='代申请的'){

    daiRequest(Object.assign(options)).then(res=>{
      if(res?.data?.length>0 ||notNull){
        insertList(res.data,t)
      }
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

    })

  }
  else if (selectTable.value.name=='申请历史' ){


    myCarRequest(Object.assign(options,{applicantId:userInfo.userId})).then(res=>{
      if(res?.data?.list?.length>0||notNull){
        insertList(res.data.list,t)
      }
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

    })
  } else if (selectTable.value.name=='审批历史'){
    // let b = [
    //   {
    //     licensePlate: "浙B965YN",
    //     status:0,
    //
    //
    //   }
    // ]
    // insertList(b,t)
    myCarRequest(Object.assign(options,{departmentId:userInfo.depId=='106'?'':userInfo.depId,applicantName:splsSearch.value})).then(res=>{
      if(res?.data?.list?.length>0 ||notNull){
        insertList(res.data.list,t)
      }
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

    })
  }
  else if (selectTable.value.name=='下属车辆'){

    quotaList(Object.assign(options,{departmentName:userInfo.depName})).then(res=>{
      if(res?.data?.list.length>0){
        carTong.value.xscl = res.data.list[0]
      } tongjiData.value.forEach(e=>{
        if(e.name=='车辆总数'){
          e.num = res.data.list[0].numberUsed
        }else if(e.name=='配额总数'){
          e.num = res.data.list[0].quota
        }else if(e.name=='即将释放车位数'){
          e.num = res.data.list[0].impendingRelease||0
        }
      })
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过
    })

    xiashuRequest(Object.assign(options,{licensePlate:'',userName:keyword.value})).then(res=>{
      if(res.code==200){
        if(res?.data?.length>0||notNull){
          res?.data.forEach(e=>{

            if(e.memo){
              if(e.memo.indexOf('A1')!==-1){
                e.vehiclePersonnelType = 'A1'
              }else if(e?.memo?.indexOf('A2')!==-1){
                e.vehiclePersonnelType = 'A2'
              } else {
                e.vehiclePersonnelType = 'B'
              }

            }else{
              e.vehiclePersonnelType = '未知'
            }
          })
          if(res.data.length>0){
            insertList(res.data,t)
          }else{
            toast('暂无数据')
            insertList([],t)
          }

        }
      }else{
        insertList([],t)
      }

      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过
    })
  }
  else if (selectTable.value.name=='车辆管理'){
    TongRequest().then(data=>{
      mainCarData.value[0].num = data.data.carNumber[data.data.carNumber.length-1].allCarNumber
      mainCarData.value[1].num = data.data.parking[3].idleLot
      mainCarData.value[2].num = data.data.parking[2].idleLot
    })


     quanbuRequest(Object.assign(options,{licensePlate:'',param:keyword.value})).then(async res=>{
      if(res.code==200){
      // ||res?.data?.reservedVehicle?.length>0
        if(res?.data?.allVehicle?.length>0){
        if(res?.data?.allVehicle?.length>0||notNull){

           res?.data.allVehicle.forEach( e=>{
            e.departmentName = e.carDepartmentList[0].departmentName
            if(e.memo ){
              if(e.memo.indexOf('A1')!==-1){
                e.vehiclePersonnelType = 'A1'

                // memo
                //     :
                //     "A2"
                // memo
                //     :
                //     "A2"
              }else if(e?.memo?.indexOf('A2')!==-1){
                e.vehiclePersonnelType = 'A2'
              } else if(e?.memo?.indexOf('B')!==-1) {
                e.vehiclePersonnelType = 'B'
              } else{
                e.vehiclePersonnelType = '未知'
              }

            }else{
              e.vehiclePersonnelType = '未知'
            }


          })
          insertList(res.data.allVehicle,t)
          items.value.forEach(r=>{
            if(!r.ownerName){
              getCarUserInfo({licensePlate:r.carNum}).then(
                  resp => {
                    r.ownerName = resp.data.ownerName

                  }
              )
            }
          })

          }else{
          insertList([],t)
        }
        } else if (res?.data?.reservedVehicle?.length>0) {
          if (res?.data?.reservedVehicle?.length > 0||notNull ) {
            res?.data.reservedVehicle.forEach(e => {
              e.departmentName = '访客车辆'
              e.memo = '临时车'
              e.vehiclePersonnelType = '临时车'
              e.ownerName = e.consumerName
              e.passThroughAgeing = e.endTime
            })
            insertList(res.data.reservedVehicle, t)
          }else{
            insertList([],t)
          }
        }else{
          toast('暂无数据')
          insertList([],t)
        }
      }else{
        insertList([],t)
      }

      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

    })
  }

  else if (selectTable.value.name=='车位管理'&&cheweiSel.value=='配额管理'){
    quotaList(Object.assign(options,{departmentName:depNameSearch.value})).then(res=>{
      if(res?.data?.list.length>0||notNull){
        console.log('123456')
        insertList(res.data.list,t)
      }
      console.log('mjkjgsdhg')

      console.log(items.value)
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过
    })
  }  else if (selectTable.value.name=='车位管理'&&cheweiSel.value=='车辆余位'){
    TongRequest(Object.assign(options,{departmentName:depNameSearch.value})).then(res=>{
      if(res.code==200){
        tongData.value= res.data

        clyw.value.forEach(item=>{

          if(item.label=='总余位'){
            item.value = res.data.parking.filter(i=>i.parkingLot=='总余位')[0].idleLot
          }else if(item.label=='南区余位'){
            item.value = res.data.parking.filter(i=>i.parkingLot=='南校区停车场')[0].idleLot
          }else if(item.label=='北区余位'){
            item.value = res.data.parking.filter(i=>i.parkingLot=='北校区停车场')[0].idleLot
          }else if(item.label=='地库余位'){
            item.value = res.data.parking.filter(i=>i.parkingLot=='地下车库')[0].idleLot
          }
        })

        // zaixiao.value.forEach(item=>{
        //
        //   if(item.label=='在校车辆数'){
        //     item.value = res.data.carNumber.filter(i=>i.carStatisticsName=='在校车辆数')[0].carStatisticsNum
        //   }else if(item.label=='A1类在校数'){
        //     item.value = res.data.carNumber.filter(i=>i.carStatisticsName=='A1')[0].carStatisticsNum
        //   }else if(item.label=='A2类在校数'){
        //     item.value = res.data.carNumber.filter(i=>i.carStatisticsName=='A2')[0].carStatisticsNum
        //   }else if(item.label=='B类在校数'){
        //     if((res.data.carNumber.filter(i=>i.carStatisticsName=='B').length>0)){
        //       item.value = res.data.carNumber.filter(i=>i.carStatisticsName=='B')[0].carStatisticsNum
        //
        //     }
        //   }
        // })

        shiyl.value.forEach(item=>{

          if(item.label=='总使用率'){
            item.value = ((res.data.parking.filter(i=>i.parkingLot=='总余位')[0].idleLot/res.data.parking.filter(i=>i.parkingLot=='总余位')[0].totalLot)*100).toFixed(1)
          }else if(item.label=='南区使用率'){
            item.value = ((res.data.parking.filter(i=>i.parkingLot=='南校区停车场')[0].idleLot/res.data.parking.filter(i=>i.parkingLot=='南校区停车场')[0].totalLot)*100).toFixed(1)
          }else if(item.label=='北区使用率'){
            item.value = ((res.data.parking.filter(i=>i.parkingLot=='北校区停车场')[0].idleLot/res.data.parking.filter(i=>i.parkingLot=='北校区停车场')[0].totalLot)*100).toFixed(1)
          }else if(item.label=='地库使用率'){
            item.value = ((res.data.parking.filter(i=>i.parkingLot=='地下车库')[0].idleLot/res.data.parking.filter(i=>i.parkingLot=='地下车库')[0].totalLot)*100).toFixed(1)
          }
        })

        console.log('44444555555',shiyl.value)



      }
      // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过
    })

    setTimeout(()=>{
      qushiRequest({type:0}).then(res1=>{

        chartData1.value.series[0].data.length=0
        chartData1.value.series[1].data.length=0
        chartData1.value.categories.length=0
        res1.data.carInoutTrend.forEach((item,index)=>{
          if(index>=4){
            chartData1.value.categories.push(item.dates)
            chartData1.value.series[0].data.push(item.inFlow)
            chartData1.value.series[1].data.push(item.outFlow)
          }
        })
      })
    },500)

  }


},50)


  // 搜索参数
  if (keyword.value.trim() != ""&&selectTable.value.name=='下属车辆') {
  options.addUserRealName = keyword.value.trim();
  }
}


const deleteMyCar = (e) => {
  console.log(e)
  // if (loading.value) return;
  showConfirm(`确定删除车辆【${e.carNum}】吗？`).then(res => {
    if (!res.confirm) return;
    // console.log(e.licensePlate)
    deleteDaiAdd({licensePlate:e.carNum} ).then(res=>{
      if(res.code==200){
        toast('删除成功')
        items.value.length=0
        getInspectList(1)
      }
    })
  })
}

const deleteCar = (e) => {
  console.log(e)
  // if (loading.value) return;
  showConfirm(`确定删除车辆【${e.licensePlate}】吗？`).then(res => {
    if (!res.confirm) return;
    // console.log(e.licensePlate)
    deleteDaiAdd({licensePlate:e.licensePlate} ).then(res=>{
      if(res.code==200){
        toast('删除成功')
        items.value.length=0
        getInspectList(1)
      }
    })
  })
}

const toInfo = (e ,t)=>{
  uni.navigateTo({ url: `/subPackages/approval/info?id=${e.id}&type=${t}` })
}

const toCarInfo = (e ,t)=>{
  uni.navigateTo({ url: `/subPackages/approval/carInfo?info=${JSON.stringify(e)}&type=${t}` })
}

const modeTip = ref({
  title:'车辆申请数到达上限',
  show:false,
  content:'已申请车辆+审批中的车辆不得超过两台，如需重新申请车辆，请先点击卡片上的【删除】按钮删除已录入车辆并重新申请新车辆。'
})

const checkCarNum = ()=>{
  let userInfoCheck = store.getters.userInfo
   let data1 = items.value.length
  myCarRequest(Object.assign({pageNum:1,pageSize:1000},{applicantId:userInfoCheck.userId})).then(res=>{
    if(res?.data?.list?.length>0){
      res.data.list.forEach(data=>{
        if(data.status!='2'){
          data1 = data1+1
        }
      })


    }
    // 0代表刚申请，1代表部门主管通过，2代表后勤通过，3代表部门主管未通过，4代表后勤未通过

  })
  return data1
}
const submit = (e) => {
  // toast('暂未开放')
  if(selectTable.value.name == '我的车辆'){

    // myCarCheck().then(res=>{
    //     if(res.data>=2){
    //       modeTip.value.show = true
    //       return
    //     }else{
    //       uni.navigateTo({ url: `/subPackages/approval/post` })
    //     }
    //   })

    const a = checkCarNum()
    if(a>=2){
      modeTip.value.show = true
      return
    }else{
      uni.navigateTo({ url: `/subPackages/approval/post` })
    }
      // uni.navigateTo({ url: `/subPackages/approval/post` })  //1:自己申请  2：代申请


      // uni.navigateTo({ url: `/subPackages/approval/post` })  //1:自己申请  2：代申请


  } else if (selectTable.value.name == '代申请的'){
    uni.navigateTo({ url: `/subPackages/approval/postdai` })
  }
}

const goMessage = (e)=>{
  uni.navigateTo({ url: `/subPackages/approval/message` })
}

const cheweiSel = ref('车辆余位')
const cheweiOpt=[
  {
    name:'车辆余位',
    value:'0'
  },
  {
    name:'配额管理',
    value:'1'
  }
]



const selClickChewei = (e)=>{
  cheweiSel.value = e.name
  getInspectList(1)
}
const tongData= ref({})

const clyw = ref([
  {label:'总余位',value:'0',dan:'个'},
  {label:'南区余位',value:'0',dan:'个'},
  {label:'北区余位',value:'0',dan:'个'},
  {label:'地库余位',value:'0',dan:'个'},
])

const zaixiao = ref([
  {label:'总车位数',value:'702',dan:'个'},
  {label:'南区总车位',value:'325',dan:'个'},
  {label:'北区总车位',value:'212',dan:'个'},
  {label:'地库总车位',value:'165',dan:'个'},
])

const shiyl = ref([
  {label:'总使用率',value:100},
  {label:'南区使用率',value:100},
  {label:'北区使用率',value:100},
  {label:'地库使用率',value:100},
])

const  opts= {
  color: ["#91CB74","#1890FF","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  padding: [15,10,0,15],
  dataLabel: false,
  dataPointShape: false,
  enableScroll: true,
  legend: {
    position: 'top',
    float:'right'
  },
  xAxis: {
    // xAxis: {
      disableGrid: true,
      scrollShow: true,
      itemCount: 7
    // },
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: [
      {
        min: 0,
        // max: 150
      }
    ]
  },
  extra: {
    line: {
      type: "curve",
      width: 2,
      activeType: "hollow",
      linearType: "custom",
      onShadow: true,
      animation: "horizontal"
    }
  }
}

const chartData1 = ref(
    {
      categories: ["1:00","2:00","3:00","4:00","5:00","6:00","7:00","8:00","9:00","10:00","11:00"],
      series: [
        {
          name: "进校",
          linearColor: [
            [
              0,
              "#08f815"
            ],
            [
              1,
              "#08f815"
            ]
          ],
          setShadow: [
            3,
            8,
            20,
            "#08f815"
          ],
          data: []
        },
        {
          name: "出校",
          linearColor: [
            [
              0,
              "#1890FF"
            ],
            [
              1,
              "#1890FF"
            ]
          ],
          setShadow: [
            3,
            8,
            20,
            "#1890FF"
          ],
          data: []
        },
      ]
    }
)




</script>

<style lang="scss" scoped>
.sel-box{
display: flex;
  padding: 15rpx 32rpx;
  .ma-le{
    margin-left: 20rpx;
    font-size: 24rpx;

  .sel{
    padding: 8rpx 18rpx;
    background-color: rgba(0, 122, 255, 0.11);
    color: #007aff;
  }
  .no{
    padding: 8rpx 18rpx;
    background-color: rgba(24, 24, 24, 0.1);
    color: #3b3b3b;
  }
  }
}

.clyw{
  margin-top: -18rpx;
  padding:20rpx 32rpx 0 32rpx;
  //background-color: #fff;
  .clyw-main{
    //margin-top: 20rpx;
    .top1{
      display: flex;
      justify-content: space-between;

      .top1-item{
        border: 0.5rpx solid #eaeaea;
        background-color: #fff;
        width: 16.5%;
        padding: 15rpx 20rpx;
        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.1);
        .name{
          font-size: 21rpx;
          //text-align: center;
        }
        .value{
          display: flex;
          margin-top: 15rpx;
          .data{
            font-size: 33rpx;
            font-weight: bold;
          }
          .title{
            margin-top: 10rpx;
            margin-left: 10rpx;
            font-size: 26rpx;
          }
          //font-size: 26rpx;
        }
      }


    }
    .top2{
      display: flex;
      justify-content: space-between;
      padding-top: 28rpx;

      .top1-item{
        border: 0.5rpx solid #eaeaea;
        background-color: #fff;
        width: 16.5%;
        padding: 15rpx 20rpx;
        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.1);
        .name{
          font-size: 21rpx;
          //text-align: center;
        }
        .value{
          display: flex;
          margin-top: 15rpx;
          .data{
            text-align: center;
            font-size: 33rpx;
            font-weight: bold;
          }
          .title{
            margin-top: 10rpx;
            margin-left: 10rpx;
            font-size: 26rpx;
          }
          //font-size: 26rpx;
        }

        .chars{
          margin-top: 15rpx;
          display: flex;
          background-color: rgba(114, 114, 114, 0.11);
          height: 10rpx;
          .use{
            height: 100%;
            background-color: #007aff;
            border-radius:18rpx;
          }
          .empt{
            height: 100%;

          }
        }
      }


    }

    .charts{
      //width: 100%;
      //height: 500rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 35rpx;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.1);
      padding: 20rpx;
      .title{
        font-size: 28rpx;
        font-weight: bold;
      }
      .chart-sty{
        height: 400rpx;
      }
    }
  }
}

.tip-text{
  width: 100%;
  color: #b4b4b4;
  font-size: 26rpx;
  //margin-top: 50rpx;
  text-align: center;
}

.chewei{
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  color: #007aff;
  font-size: 26rpx;
}
.tuisong{
  position: absolute;
  right: 32rpx;
}

.tongMain{
  //width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5rpx 32rpx 32rpx 32rpx;
}
.subtit{
  color: #7f7f7f;
  font-weight: normal;
  font-size: 20rpx;
}
.tongjiBoxitem{
    border: 0.5rpx solid #eaeaea;
    background-color: #fff;
    width: 24%;
    padding: 25rpx;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.1);
    .name{
      font-size: 23rpx;
    }
    .value{
      display: flex;
      margin-top: 15rpx;
      .data{
        font-size: 33rpx;
        font-weight: bold;
      }
      .title{
        margin-top: 10rpx;
        margin-left: 10rpx;
        font-size: 26rpx;
      }
      //font-size: 26rpx;
    }
  }

.nianTop{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}
.daiInfo-commonche{
  width: 100%;
  display: flex;
  justify-content: space-around;
}

  .infoItem-che{
  display: flex;
  font-size: 28rpx;
    margin-top: 20rpx;
    width: 50%;
  .info-data{
    color: #7f7f7f;
  }
}

.search{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 15rpx 25rpx 1rpx 25rpx;
}
.daiInfo-common{
  //border-radius: 0 0 16rpx 16rpx;
  width: 100%;
  //padding-bottom: 20rpx;
  display: flex;
  //background: linear-gradient(to right, #fff, #f1f3ff);

  justify-content: space-between;
  .infoItem{
    display: flex;
    font-size: 23rpx;
    .info-data{
      color: #7f7f7f;
    }
  }
}
.status-clgl{
  display: inline-block;
  min-width: 70rpx;
  line-height: 32rpx;
  //background: #FFF4D1;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #F27900;
  border: 0.5rpx solid #F27900;
  text-align: center;
  position: absolute;
  right: 32rpx;
  top: 36rpx;
  &.success{
    color: #03d007;
    border: 0.5rpx solid #03d007;
    //background: rgba(3, 208, 7, 0.1);
  }

  &.primary{
    color: #1677FF;
    border: 0.5rpx solid #1677FF;
    //background: rgba(22, 119, 255, 0.1);
  }

  &.error{
    color: red;
    border: 0.5rpx solid red;
    background: rgba(255, 0, 0, 0.1);
  }
}

.shen-sqls{
  display: inline-block;
  min-width: 55rpx;
  line-height: 32rpx;
  background: rgba(22, 119, 255, 0.1);
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #1677FF;
  //border: 0.5rpx solid #F27900;
  text-align: center;
  position: absolute;
  right: 130rpx;
  top: 36rpx;
  padding: 3rpx 10rpx;
}



.status-sqls{
  display: inline-block;
  min-width: 55rpx;
  line-height: 32rpx;
  background: rgba(242, 121, 0, 0.1);
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #F27900;
  //border: 0.5rpx solid #F27900;
  text-align: center;
  position: absolute;
  right: 32rpx;
  top: 36rpx;
  padding: 3rpx 10rpx;
  &.success{
    color: #03d007;
    //border: 0.5rpx solid #03d007;
    background: rgba(3, 208, 7, 0.1);
  }

  &.error{
    color: red;
    //border: 0.5rpx solid red;
    background: rgba(255, 0, 0, 0.1);
  }
}
.selsy{
display: flex;
  justify-content: space-around;
}

.dropdown-container {
  position: relative;
  width: 100%;
  display: flex;
}

.dropdown-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  //border: 1px solid #ccc;
  cursor: pointer;
  .selTop{
    font-size: 26rpx;
  }
  .ico{
    margin-left: 8rpx;
  }
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
}

.dropdown-list {
  //width: 100%;
  //height: auto;
  max-height: 400rpx;
  padding-bottom: 15rpx;
  overflow-y: auto;
  position: absolute;
  top: 225rpx;
  left: 0;
  right: 0;
  border-radius: 0 0 10rpx 10rpx;
  background-color: #fff;
  border: 0.5px solid #d9d8d8;
  z-index: 1000;
}

.dropdown-item {
  padding: 10px 32px 10rpx 32rpx;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  &.sel{
    background-color: rgba(0, 122, 255, 0.1);
  }
  .selOpt{
    font-size: 28rpx;
  }

}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.5s ease-out;
  max-height: 200px; /* 根据实际情况调整最大高度 */
  opacity: 1;
}

.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
  max-height: 0;
  opacity: 0;
}
.gai{
  position: absolute;
  top: 58%;
  left: 22%;
  width: 60%;
  height: 30%;
  //background-color: red;
  z-index:999999
}
.page {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  &-search {
    background: #fff;
    padding-bottom: 12rpx;
    //position: sticky;
    //top: 89rpx;
    z-index: 100;
    .input {
      padding: 12rpx 24rpx;
      border: 1rpx solid rgba(0,0,0,0.06);
    }
  }

  &-items {
    padding: 24rpx 0 60rpx 0;
  }

  &-item {
    border-radius: 16rpx;
    background: #FFF;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.05);
    width: 684rpx;
    margin: 0 auto;
    margin-bottom: 24rpx;
    box-sizing: border-box;

    position: relative;


      .status {
        display: inline-block;
        min-width: 76rpx;
        line-height: 32rpx;
        background: #FFF4D1;
        border-radius: 4rpx;
        font-size: 20rpx;
        color: #F27900;
        text-align: center;
        position: absolute;
        right: 32rpx;
        top: 36rpx;
        &.success {
          color: #1677FF;
          background: rgba(22,119,255,0.1);
        }
      }
      .title {
        width: 480rpx;
        line-height: 45rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(0,0,0,0.85);
        padding: 32rpx 32rpx 0;
      }
    .title-sub {
      width: 480rpx;
      line-height: 45rpx;
      font-size: 28rpx;
      //font-weight: 500;
      //color: rgba(124, 124, 124, 0.85);
      padding: 10rpx 32rpx 0 32rpx;
    }
      .flex {
        display: flex;
      }
      .cover {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        overflow: hidden;
        background: #D8D8D8;
        margin-right: 24rpx;
        .image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 8rpx;
        }
      }
      .ps {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .psitem {
        display: flex;
        margin-bottom: 16rpx;
      }
      .psitem label {
        width: 120rpx;
        font-size: 28rpx;
        color: rgba(0,0,0,0.45);
        line-height: 40rpx;
        margin-right: 24rpx;
      }
      .psitem text {
        font-size: 28rpx;
        color: rgba(0,0,0,0.85);
        line-height: 40rpx;
        flex: 1;
      }
      .desc {
        background: rgba(0,0,0,0.04);
        border-radius: 8rpx;
        padding: 24rpx;
        font-size: 28rpx;
        color: rgba(0,0,0,0.85);
        line-height: 40rpx;
      }
      .btns {
        padding: 24rpx 32rpx;
        display: flex;
        justify-content: flex-end;
      }
      .btn {
        min-width: 120rpx;
        height: 56rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 1rpx solid #E5E5E5;
        font-size: 28rpx;
        color: rgba(0,0,0,0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 24rpx;
        &.primary {
          background: #1677FF;
          color: #FFF;
          border: none;
        }
      }
    .infoNorman{
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid rgba(0,0,0,0.06);
    }






    .info {

      //padding: 24rpx 32rpx;
      border-bottom: 1rpx solid rgba(0,0,0,0.06);

      .daiInfo{
        border-radius: 0 0 16rpx 16rpx;
        width: 100%;
        padding-bottom: 20rpx;
        display: flex;
        background: linear-gradient(to right, #fff, #f1f3ff);

        justify-content: space-around;
        .infoItem{
          display: flex;
          font-size: 23rpx;
          .info-data{
            color: #7f7f7f;
          }
        }
      }
    }
    .flex-w {

      //border-radius: 20rpx 0 0 20rpx ;
      display: flex;
      justify-content: space-between;
      //padding-bottom: 40rpx;

      .ri{
        //height: 220rpx;
        width: 50%;
        background-color: #f1f3ff;
        padding-right: 30rpx;
        border-radius: 0 16rpx 16rpx 0 ;
         .img-sty{

           width: 100%;

            height: 100%;
          }
      }
      .le{
        border-radius: 16rpx 0 0 16rpx ;
        width: 50%;
        padding: 32rpx 0 32rpx 28rpx;
        background: linear-gradient(to right, #fff, #f8f9fe);
        .carid{
          display: flex;
          .idSty{
            font-size: 38rpx;
            //font-weight: bold;
          }
          .inde-icon{
            height: 30rpx;
            display: flex;
            padding: 3rpx 8rpx;
            margin-left: 20rpx;
            margin-top: 5rpx;
            width: auto;
            //height: 30rpx;
            border-radius: 5rpx;
            background-color: rgba(71, 115, 238, 0.11);
            .posSty{
              color: #007aff;
              font-size: 18rpx;
            }
          }
          .code{
            font-weight: bold;
            font-size: 35rpx;
          }
        }
        .careName{
          margin-top: 10rpx;
          font-size: 25rpx;
             color: rgba(127, 127, 127, 0.99);
        }
      }
    }
  }

}
.post-btn {
  width: 100vw;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  border: 0 !important;
  box-sizing: border-box;
  padding: 20rpx 32rpx 40rpx 32rpx;
}

</style>